<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热门话题列表</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.6/dist/css/layui.css">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
          integrity="sha384-olOxEXxDwd20BlATUibkEnjPN3sVq2YWmYOnsMYutq7X8YcUdD6y/1I+f+ZOq/47" crossorigin="anonymous">
    <style>
        .messages {
            padding: pxToRem(5) 0;
            height: pxToRem(42);
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

    </style>
</head>
<body>
<button type="button" class="layui-btn layui-btn-primary"><a href="{:url('create')}">发布内容</a></button>
<div class="grid-demo grid-demo-bg1">
    <p class="layui-elem-quote" style="font-size: 50px">欢迎:{$Think.session.userInfo.username}
        <button type="button" class="layui-btn layui-btn-danger" style="float: right"><a
                href="{:url('login/loginOut')}">退出登录</a></button>
    </p>

</div>


<div class="layui-row">
    <div class="layui-col-xs6">
        <div class="grid-demo grid-demo-bg1">


            <div class="jumbotron">


                {foreach $data1 as $v}
                <input type="hidden" value="{$v->id}">
                <div class="card" style="width: 18rem;">
                    <img src="{$v->a_images}" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title"><a href="{:url('read')}?id={$v->id}">{$v->title}</a></h5>
                        <p class="card-text">
                            <span class="messages">{$v->content}</span>
                        </p>
                        <a href="#" class="btn btn-primary">作者: {$v->auth}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button
                            type="button"><span style="color: red" id="like">点赞:{$v->like}</span></button>
                    </div>
                </div>
                {/foreach}

            </div>


        </div>

    </div>
    <div class="layui-col-xs6" style="float: right">
        <p class="layui-elem-quote" style="font-size: 50px">排行榜</p>
        <div class="grid-demo">
            <table>
                <tr>
                    <td>标题</td>
                    <td>点赞数</td>
                </tr>

            {foreach $data2  as $v}
                <tr>
                    <td>{$v.title}</td>
                    <td>{$v.like}</td>
                </tr>
            {/foreach}

            </table>
        </div>
    </div>
</div>
<div style=" text-align:center">
    {$data1->render()|raw}
</div>

</body>
</html>
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.6/dist/layui.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function () {
        $('button').click(function () {
            let id = $('input').val();
            let _this = $(this);
            console.log(id)
            $.ajax({
                url: "{:url('like')}",
                data: {id: id},
                dataType: 'json',
                success: function (res) {
                    if (res.code == 400) {
                        _this.html('点赞:' + res.data)
                    }
                }
            })
        })
    })
</script>